<template>
	<div v-loading="$store.state.user.userindex.loading">
    <div class="header">
      <img class="center previewer-demo-img" :src="url" @click="show()">
      <div class="userinfo">
        <p>{{data.vip_name}}</p>
        <p>本轮件数: {{data.bljs}}</p>
        <p>本轮积分: {{data.bljf}}</p>
        <p>等级: {{level_name}}</p>
      </div>
      <div class="userbox_botm">
        <grid class="user_grid">
          <grid-item label="积分返现" @click.native="$router.push({name:'vipfanxianlist'})">
            {{data.fanxian}}
          </grid-item>
          <grid-item label="存款" @click.native="$router.push({name:'vipdepositlist'})">
            {{data.cunkuan}}
          </grid-item>
          <grid-item label="充值款" @click.native="$router.push({name:'viprechargelist'})">
            {{data.chongzhi}}
          </grid-item>
        </grid>
      </div>
    </div>
		<!--<blur :blur-amount=40 :url="url" class="user_top">-->
			<!---->
		<!--</blur>-->
		<!--列表-->
		<!--<div class="contact-list" style="border-bottom:1px solid #EBEEF5; margin-bottom:10px; ">-->
			<!--<van-cell-group style="text-align: left;background: #fff;">-->
				<!--<van-cell title="我的订单" is-link icon="pending-orders"  @click="orderFn(0)"/>-->
			<!--</van-cell-group>-->
			<!--<div style="display: flex; text-align:center; background: #fff;font-size:14px;">-->
				<!--<div class="div-icon" style="width:25%;padding:5px 0;" @click="orderFn(1)">-->
					<!--<i class="iconfont icon-weibiaoti2fuzhi04"></i>-->
					<!--<p style="margin:3px 0;">待付款</p>-->
				<!--</div>-->
				<!--<div class="div-icon" style="width:25%;padding:5px 0;" @click="orderFn(2)">-->
					<!--<i class="iconfont icon-weibiaoti2fuzhi05"></i>-->
					<!--<p style="margin:3px 0;">待发货</p>-->
				<!--</div>-->
				<!--<div class="div-icon" style="width:25%;padding:5px 0;" @click="orderFn(3)">-->
					<!--<i class="iconfont icon-daishouhuo"></i>-->
					<!--<p style="margin:3px 0;">待收货</p>-->
				<!--</div>-->
				<!--<div class="div-icon" style="width:25%;padding:5px 0;" @click="orderFn(4)">-->
					<!--<i class="iconfont icon-shouhou"></i>-->
					<!--<p style="margin:3px 0;">已完成</p>-->
				<!--</div>-->
			<!--</div>-->
		<!--</div>-->
		<group>
			<cell is-link @click.native="$router.push({name:'userinfo'})">
				<span slot="title">
          <i class="iconfont icon-gerenxinxi" style="margin-right:3px;line-height: 23px;"></i>
          <span style="vertical-align:middle;">个人信息</span><!-- <badge text="1"></badge>-->
        </span>
			</cell>
			<cell is-link @click.native="$router.push({name:'memberquanyi'})">
				<span slot="title">
          <i class="iconfont icon-dianyuanxiaoshoupaihang" style="margin-right:3px;line-height: 23px;"></i>
          <span style="vertical-align:middle;">会员权益</span><!-- <badge text="1"></badge>-->
        </span>
			</cell>
			<cell is-link @click.native="$router.push({name:'user_card'})">
				<span slot="title">
          <i class="iconfont icon-huiyuanqia" style="margin-right:3px;line-height: 23px;"></i>
          <span style="vertical-align:middle;">我的会员卡</span><!-- <badge text="1"></badge>-->
        </span>
			</cell>

			<cell is-link  @click.native="$router.push({name:'user_coupon'})">
        <span slot="title">
          <i class="iconfont icon-youhuiquan3" style="margin-right:3px;line-height: 23px;"></i>
          <span style="vertical-align:middle;">优惠券</span><!-- <badge text="1"></badge>-->
        </span>
      </cell>
			<cell is-link @click.native="$router.push({name:'sale'})">
        <span slot="title">
          <i class="iconfont icon-xiaofeijilu_fuzhi" style="margin-right:3px;line-height: 23px;"></i>
          <span style="vertical-align:middle;">消费记录</span><!-- <badge text="1"></badge>-->
        </span>
      </cell>
		</group>
		<group>
			<cell is-link @click.native="$router.push({name:'stores'})">
        <span slot="title">
          <i class="iconfont icon-fendian" style="margin-right:3px;line-height: 23px;"></i>
          <span style="vertical-align:middle;">所有分店</span><!-- <badge text="1"></badge>-->
        </span>
      </cell>
      <cell >
        <span slot="title">
          <i class="iconfont icon-fuwurenyuan" style="margin-right:3px;line-height: 23px;"></i>
          <span style="vertical-align:middle;">开卡经理: {{data.empName}}</span><!-- <badge text="1"></badge>-->
        </span>
      </cell>
		</group>
		<box gap="20px 10px">
			<x-button type="warn" @click.native="loginout">注销登录</x-button>
		</box>
		<div v-transfer-dom>
			<previewer :list="list" ref="previewer" :options="options"></previewer>
		</div>
	</div>
</template>

<script>
	import { Blur, Grid, GridItem, Previewer, TransferDom} from 'vux';
	export default {
		directives: {
			TransferDom
		},
		components:{
			Grid,
			GridItem,
			Blur,
			Previewer
		},
		data(){
			return {

				options: {
					getThumbBoundsFn (index) {
						// find thumbnail element
						let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
						// get window scroll Y
						let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
						// optionally get horizontal scroll
						// get position of element relative to viewport
						let rect = thumbnail.getBoundingClientRect()
						// w = width
						return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
						// Good guide on how to get element coordinates:
						// http://javascript.info/tutorial/coordinates
					}
				},
        level_name: ''
			}
		},
		methods : {
			// 跳转订单
			orderFn(idx){
				this.$router.push({ name: "shop_order",params:{active: idx,}});
			},
			show(){
				this.$refs.previewer.show(0)
			},
			loginout(){
        this.$message({
          message: '登陆过期，请重新登陆！',
          type: 'error'
        });
				localStorage.removeItem('user');
				localStorage.removeItem('company');
				localStorage.removeItem('api_token');
				localStorage.removeItem('refresh_token');
        location.reload()
			},
      // 获取我的经纬度
      getMyPoint () {
        var geolocation = new BMap.Geolocation()
        geolocation.getCurrentPosition(function (res) {
          var pointA = new BMap.Point(res.point.lng, res.point.lat)  // 通过浏览器获得我的经纬度
          pointA = JSON.stringify(pointA)
          sessionStorage.setItem('pointA',pointA)
        })
      }
		},
		computed : {
			data (){
			  // console.log(this.$store.state.user.userindex.data.tolevel)
			  // console.log(this.$store.state.user.userindex.data.tolevel.level_name)
			  this.level_name = this.$store.state.user.userindex.data.tolevel.level_name
				return this.$store.state.user.userindex.data;
			},
			url(){
				return this.data.toinfo.photo ? 'http://image.lanaoboxiang.com/'+this.data.toinfo.photo : 'http://newerp.lanaoboxiang.com/static/img/detail.0f7a470.png'
			},
			list(){
				return [
					{
						src : this.url,
						msrc : this.url

					}
				]
			},
		},
		created(){
			this.$store.dispatch('user/userindex/initdata');
		},
    mounted(){
      if(sessionStorage.getItem('pointA')){
        sessionStorage.removeItem('pointA','')
      }
		  this.getMyPoint()
    },
		watch : {

		}
	}
</script>

<style>
	.vux-bg-blur{z-index:0!important;}
  .user_top{
    background: #E64340;
  }
	.center{
		width: 80px;
		height: 80px;
		border-radius: 50%;
		position: absolute;
		left:20px; top:20px;
		border: 3px solid #ececec;
	}
	.userinfo{ color: #f1f1f1; position: absolute; left: 120px; top: 28px; font-size: 14px;}
	.userbox_botm{background: rgba(0,0,0,.3); position: absolute; bottom: 0; width:100%;}
	.weui-grid__label{font-size: 12px!important;}
	.weui-grid{
		font-size: 14px;
		color: #fff;
		text-align: center;
		padding: 3px 0 !important;
	}
	.weui-grid__label{ color:#fff!important;font-size: 12px;}
  .header{
    height: 200px;
    position: relative;
    overflow: hidden;
    background: #E64340;
  }

</style>
